<title>弹出层</title>

<div class="content-header row">
    <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
        <h3 class="content-header-title mb-0 d-inline-block">弹出层</h3>
        <div class="row breadcrumbs-top d-inline-block">
            <div class="breadcrumb-wrapper mr-1">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
                    <li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
                    <li class="breadcrumb-item active">弹出层</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="content-body">
    <section class="basic-inputs">
        <div class="row match-height">
            <div class="col-xl-12 col-lg-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">基本使用介绍</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    基本信息框 modal.alert(content, options, yes);
                                </p>
                                <p>
                                    类似系统alert，但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可
                                </p>
                                <a href="javascript:;" id="alert" class="btn btn-info btn-sm">运行</a>
                                <pre>
                                    <code class="language-javascript">
                                        modal.alert("你好，Modal");

                                        modal.alert("你好，Modal",{shade:false});

                                        modal.alert("你好，Modal",function(dialogId, dialogElement){
                                            alert("点击确定");
                                        });
                                    </code>
                                </pre>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    询问框 modal.confirm(content, options, yes, cancel);
                                </p>
                                <p>
                                    类似系统confirm，但却远胜confirm，另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。
                                </p>
                                <a href="javascript:;" id="confirm" class="btn btn-info btn-sm">运行</a>
                                <pre>
                                    <code class="language-javascript">
                                        modal.confirm("你好，Modal",{shade:false},function (dialogId, dialogElement) {
                                            modal.msg("你点了确定");
                                            modal.close(dialogId);
                                        },function () {
                                            modal.msg("你点了取消");
                                        });
                                    </code>
                                </pre>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    提醒框 modal.msg(content, options, close);
                                </p>
                                <p>
                                    简单的消息提醒，而且默认还会3秒后自动消失
                                </p>
                                <a href="javascript:;" id="msg" class="btn btn-info btn-sm">运行</a>
                                <pre>
                                    <code class="language-javascript">
                                        modal.msg("你好，Modal");
                                    </code>
                                </pre>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    加载层 modal.load(content, options);
                                </p>
                                <a href="javascript:;" id="load" class="btn btn-info btn-sm">运行</a>
                                <pre>
                                    <code class="language-javascript">
                                        modal.load("加载中");
                                    </code>
                                </pre>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    iframe层 modal.iframe(url, options, yes, cancel);
                                </p>
                                <a href="javascript:;" id="iframe" class="btn btn-info btn-sm">运行</a>
                                <pre>
                                    <code class="language-javascript">
                                        modal.iframe("./views/demo/components/modal-iframe-demo.html",{size:["lg","472px"]}, function (dialogId,dialogElement) {
                                            console.log(modal.getFrameForm(dialogId, ".form"));
                                        });
                                    </code>
                                </pre>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    自定义层 modal.open(options);
                                </p>
                                <pre>
                                    <code class="language-javascript">
                                        modal.open({
                                            //Enum['','xl','lg','sm','xs']/String  size:'500px'自定义宽度 size:['500px','500px']  宽度,高度
                                            size: '',
                                            offset: 'auto',
                                            //String/Array/Boolean shade:[0.8, '#393D49'] shade: 0  shade:false
                                            shade: 0.3,
                                            shadeClose: true,
                                            header: true,
                                            //String/Array/Boolean title :'我是标题' title: ['文本', 'font-size:18px;'] title: false
                                            title: '\u4fe1\u606f',
                                            //Boolean/Function
                                            closeBtn: true,
                                            //默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒
                                            time: 0,
                                            autoHeight: 100,
                                            anim: 0,
                                            maxmin: false,
                                            zIndex: 20000,
                                            scrollbar: false
                                        });
                                    </code>
                                </pre>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    关闭弹窗 modal.close(dialogId);
                                </p>
                                <pre>
                                    <code class="language-javascript">
                                        //当你想关闭当前页的某个层时
                                        var index = modal.open();
                                        var index = modal.alert();
                                        var index = modal.load();
                                        var index = modal.iframe();
                                    </code>
                                </pre>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    关闭所有弹窗 modal.closeAll(dialogId);
                                </p>
                                <pre>
                                    <code class="language-javascript">
                                        //当你想关闭当前页的某个层时
                                        layer.closeAll();         //关闭所有层
                                        layer.closeAll('dialog'); //关闭信息框
                                        layer.closeAll('iframe'); //关闭所有的iframe层
                                        layer.closeAll('loading'); //关闭加载层
                                    </code>
                                </pre>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    全屏 modal.fullscreen(dialogId);
                                </p>
                                <a href="javascript:;" id="fullscreen" class="btn btn-info btn-sm">运行</a>
                                <pre>
                                    <code class="language-javascript">
                                        modal.fullscreen(modal.open({
                                            title:"演示全屏",
                                            maxmin:true,
                                            content:"全屏咯"
                                        }));
                                    </code>
                                </pre>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    获取iframe页的DOM modal.getFrameDom(selector, dialogId);
                                </p>
                                <pre>
                                    <code class="language-javascript">
                                        modal.iframe("./views/demo/components/modal-iframe-demo.html",{size:["lg","472px"]}, function (dialogId,dialogElement) {
                                            console.log(modal.getFrameDom(selector, dialogId));
                                        });
                                    </code>
                                </pre>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-xl-12 col-lg-12 col-md-12">
                                <p class="text-bold-600">
                                    获取iframe页的Form元素 modal.getFrameForm(dialogId, selector);
                                </p>
                                <pre>
                                    <code class="language-javascript">
                                        modal.iframe("./views/demo/components/modal-iframe-demo.html",{size:["lg","472px"]}, function (dialogId,dialogElement) {
                                            console.log(modal.getFrameForm(dialogId, ".form"));
                                        });
                                    </code>
                                </pre>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<script type="text/javascript">
    lucky.require('modal',function(){
        var modal = lucky.modal;

        $("#alert").on("click",function () {
            modal.alert("你好，Modal");
        });

        $("#confirm").on("click",function () {
            modal.confirm("你好，Modal",{shade:false},function (dialogId, dialogElement) {
                modal.msg("你点了确定");
                modal.close(dialogId);
            },function () {
                modal.msg("你点了取消");
            });
        });

        $("#msg").on("click",function () {
            modal.msg("你好，Modal");
        });

        $("#load").on("click",function () {
            modal.load();
        });

        $("#iframe").on("click",function () {
            modal.iframe("./views/demo/components/modal-iframe-demo.html",{size:["lg","472px"]}, function (dialogId,dialogElement) {
                console.log(modal.getFrameForm(dialogId, ".form"));
            });
        });

        $("#fullscreen").on("click",function () {
            modal.fullscreen(modal.open({
                title:"演示全屏",
                maxmin:true,
                content:$(".card")
            }));
        });
    });
</script>